<template>
    <div class="header">
        <mu-appbar :color="background">
            <!-- 昵称 -->
            <span style="cursor: pointer">Weiruiye</span>

            <!-- 头像 -->
            <mu-avatar slot="left" :size='50' class="header-avater">
                <img src="http://www.nevergiveupt.top/user_avatar.png" alt="">
            </mu-avatar>
            <!-- 菜单 -->
             <mu-button v-show="isPC" flat slot="right" 
                v-for="(item, index) in info.menu" 
                :key="item.name"
                @click="go(item)"
                :color="lightIndex === index?'#00e676':'' " >
                <mu-icon size='16' :value='item.icon'></mu-icon> 
                {{item.name}}
            </mu-button>

         <!-- 移动端菜单适配 -->
            <!-- 触发按钮 -->
            <mu-button v-show="!isPC" slot="left" icon @click="toggleWapMenu(true)">
                <mu-icon value='menu'></mu-icon> 
            </mu-button>

            <mu-bottom-sheet :open.sync="openWapMenu">
                <mu-list @item-click="toggleWapMenu(false)">
                <mu-list-item  @click="go(item)" button v-for="(item, index) in info.menu" :key="item.name">
                    <mu-list-item-action>
                    <mu-icon :value="item.icon" :color="lightIndex === index?'#00e676':'' "></mu-icon>
                    </mu-list-item-action>
                    <mu-list-item-title :style="{color:lightIndex === index?'#00e676':''}">{{item.name}}</mu-list-item-title>
                </mu-list-item>
             
                </mu-list>
            </mu-bottom-sheet>

            <!-- 主题修改 -->
            <mu-button flat ref="theme" slot="right" @click="openTheme = !openTheme">
                <mu-icon value='color_lens'></mu-icon>
            </mu-button>
            <mu-popover :open.sync="openTheme" :trigger="triggerTheme">
                <mu-list>
                    <mu-list-item button>
                    <mu-list-item-title>Light</mu-list-item-title>
                    </mu-list-item>
                    <mu-list-item button>
                    <mu-list-item-title>Dark</mu-list-item-title>
                    </mu-list-item>
                </mu-list>
            </mu-popover>
     
            <!-- 用户 -->
            <mu-button flat ref="button" slot="right" @click="openUser = !openUser">
                <div class="user">
                    <span>天天向上</span>
                    <mu-icon value='expand_more'></mu-icon>
                </div>
            </mu-button>
            <mu-popover :open.sync="openUser" :trigger="triggerUser">
                <mu-list>
                    <mu-list-item button>
                    <mu-list-item-title>个人中心</mu-list-item-title>
                    </mu-list-item>
                    <mu-list-item button>
                    <mu-list-item-title>退出登录</mu-list-item-title>
                    </mu-list-item>
                </mu-list>
            </mu-popover>
        </mu-appbar>

        <!-- 注册组件  -->
    <div class="tool" v-if="isShowAction">
      <div v-if="info.login && !user" class="tool-row">
        <mu-slide-left-transition>
          <mu-button
            v-show="showToolBtn"
            @click="
              openLoginModal = true;
              showToolBtn = false;
            "
            fab
            color="primary"
            >登录</mu-button
          >
        </mu-slide-left-transition>
      </div>
      <div class="tool-row">
        <mu-tooltip placement="right-start" content="登录/注册/搜索">
          <mu-button
            @click="showToolBtn = !showToolBtn"
            fab
            color="info"
            class="search-fab"
          >
            <mu-icon value="adb"></mu-icon>
          </mu-button>
        </mu-tooltip>

        <mu-slide-left-transition>
          <mu-button
            v-show="showToolBtn && info.openSearch"
            @click="handleSearch"
            fab
            color="error"
            >搜索</mu-button
          >
        </mu-slide-left-transition>
      </div>
      <div v-if="info.register && !user" class="tool-row">
        <mu-slide-left-transition>
          <mu-button
            v-show="showToolBtn"
            @click="
              openRegisterModal = true;
              showToolBtn = false;
            "
            fab
            color="warning"
            >注册</mu-button
          >
        </mu-slide-left-transition>
      </div>
    </div>

    </div>
</template>

<script>
const menus = [
    {
        name: "首页",
        router: "index",
        icon: "home",
    },
    {
        name: "文章",
        router: "articles",
        icon: "note_add",
    },
    {
        name: "归档",
        router: "archives",
        icon: "drafts",
    },
    {
        name: "分类",
        router: "categories",
        icon: "dns",
    },
    {
        name: "标签",
        router: "tags",
        icon: "loyalty",
    },
    {
        name: "关于",
        router: "about",
        icon: "perm_identity",
    },
];
export default {
    props:{
        lightIndex:{
            type: Number,
            default: 0
        },
        background: {
            type: String
        }
    },
    data() {
        return {
            info:{
                menu:menus
            },
            openTheme: false,
            triggerTheme: null,

            openUser: false,
            triggerUser: null,

            openWapMenu: false
        }
    },
    mounted () {
    this.triggerTheme = this.$refs.theme.$el;
    this.triggerUser = this.$refs.button.$el;

    },
    methods:{
        toggleWapMenu(bool){
            this.openWapMenu = bool;
        },
        //  路由跳转
        go(item){
            if(this.$router.name === item.name){
                //  点击自己时页面不跳转
                return;
            }
            this.$router.push({
                name: item.router
            })
        }
    }

}
</script>

<style lang="less" scoped>
.header{
    position: fixed;
    z-index: 1501;
    width: 100%;
    top: 0;
}

.header-avater{
    margin-left: 20px;
    cursor: pointer;
}

.mu-appbar{
    .mu-flat-button{
        flex: 1;
    }
    /deep/ .mu-appbar-right {
        flex: 1;
    }
}

//  控制用户名 显示超出
.user {
    display: flex;
    justify-content: space-around;
    align-items: center;
    span{
        display: block;
        width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: right;
    }
}
</style>